<template>
  <div class="robot-list-container">
    <!-- 顶部导航 -->
    <van-nav-bar class="nav-bar">
      <template #left>
        <van-icon name="arrow-left" class="nav-icon" @click="goBack" />
      </template>
      <template #title>
        <span class="nav-title">机器人信息</span>
      </template>
    </van-nav-bar>
    <div class="robot-list">
      <div class="robot-item">
        <div class="robot-avatar">
          <van-icon name="robot" size="28" v-if="!robot.avatar" />
          <img v-else :src="robot.avatar" alt="机器人头像">
        </div>
        <div class="robot-info">
          <div class="robot-name">{{ robot.name }}</div>
          <div class="robot-type">类型：<span class="type-tag">推送机器人</span></div>
        </div>
      </div>
      <div class="config-section">
      <div class="webhook-section">
        <div class="webhook-title">WebHook地址</div>
        <div class="webhook-url">
          <div class="url-text">{{ webhookUrl }}</div>
          <button class="copy-btn" @click="copyUrl">复制</button>
        </div>
      </div>
    </div>
      <div class="config-section">
        <div class="config-header" @click="configurationdescription">
          <div class="config-title">配置说明</div>
          <van-icon name="arrow" class="config-arrow" />
        </div>
      </div>

      <van-row>
        <van-col span="24" type="primary">
          <van-button
              type="primary"
              class="next-btn"
              @click="removeBot">
            移除机器人
          </van-button>

        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import {postAction} from "../../api";

export default {
  name: "robotDetail",
  data() {
    return {
      robot:'',
      webhookUrl:''
    }
  },
  mounted() {
    this.robot=this.$route.params;
    this.webhookUrl = window._CONFIG['domainURL'] + '/sys/chat/message/sendRobotText?key=' + this.robot.key;
  },
  methods:{
    goBack() {
      this.$router.push({name: 'myRobot'})
    },
    copyUrl() {
      // 复制URL到剪贴板
      navigator.clipboard.writeText(this.webhookUrl)
          .then(() => {
            this.$toast.success('已复制到剪贴板');
          })
          .catch(err => {
            console.error('复制失败:', err);
            this.$toast.fail('复制失败');
          });
    },
    removeBot(){
      postAction('/sys/chat/bot/removeBot',{id:this.robot.id}).then(res=>{
        if(res.code==200) {
          this.$toast.success('移除成功');
          this.$router.push({name: 'myRobot'})
        }
      }).catch(err=>{
            this.$toast.fail('移除失败');
            console.error('移除失败:', err);}
      )
    },
    configurationdescription(){
      this.$router.push({name: 'configurationdescription',params:this.$route.params})
    }
  }
}
</script>

<style scoped>
::v-deep .van-nav-bar__content{
  background: #F4FCFF;
}
.next-btn {
  width: 100%;
  margin-top: 14px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
  background: white;
  color: #d84545;
  border: none;
}
.robot-list-container {
  background: linear-gradient(180deg, #F4FCFE, #fff);
  /*background-color: #f4f8f9;*/
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.custom-navbar {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-title {
  font-size: 16px;
  font-weight: bold;
  color: #26B1A1;
  letter-spacing: 0.5px;
}

.complete-btn {
  font-size: 16px;
  color: #26B1A1;
  font-weight: 500;
}
.van-nav-bar .van-icon {
  color: #26B1A1;
  font-size: 16px;
}

.robot-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}

.empty-robot {
  text-align: center;
  padding: 60px 0;
  color: #999;
}
.empty-text {
  font-size: 16px;
  margin: 20px 0;
}
.robot-item {
  display: flex;
  align-items: center;
  padding: 16px 10px;
  border-bottom: 1px solid #f8f8f8;
  background-color: white;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 8px;
}
.robot-avatar {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(90deg, #26B1A1 , #6FD0B3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin-right: 16px;
}
.robot-info {
  flex: 1;
}
.robot-name {
  font-size: 17px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}
.robot-type {
  font-size: 14px;
  color: #999;
}
.robot-actions .van-icon {
  font-size: 20px;
  color: #969799;
}
.robot-actions .van-icon:active {
  color: #1989fa;
}
.robot-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.type-tag {
  color: white;
  background: linear-gradient(90deg, #26B1A1 , #6FD0B3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 配置区域 */
.config-section {
  width: 90%;
  max-width: 400px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.config-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.config-arrow {
  color: #c8c9cc;
  font-size: 18px;
}

.webhook-section {
}

.webhook-title {
  font-size: 14px;
  color: #000000;
  margin-bottom: 8px;
}

.webhook-url {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 8px;
}

.url-text {
  font-size: 14px;
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}

.copy-btn {
  background: #e6f7ff;
  color: #1890ff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: none;
}
</style>
